<template>
  <transition name="headerMenu-scale">
    <dl ref="headerMenuRef" v-show="modelValue" class="headerMenu">
      <dt @click="readySendDynamic">
        <SvgIcon icon-class="momentsColor" popper-class="headerMenu-icon" />发表动态
      </dt>
      <dt @click="openDynamic">
        <SvgIcon icon-class="mineDynamic" popper-class="headerMenu-icon" />我的动态
      </dt>
      <dt @click="clearCache">
        <SvgIcon icon-class="clear" popper-class="headerMenu-icon" />清除缓存
      </dt>
    </dl></transition
  >
  <send-dynamic v-model="showDynamicDiglog"></send-dynamic>
  <dynamic v-model="showDynamic" :usr-info="userStore.user" :is-self="true"></dynamic>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { usePinia } from "@/pinia/index";
import { useUserPinia } from "@/pinia/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import sendDynamic from "./createDynamic/index.vue";
import dynamic from "../dynamic/index.vue";

const props = defineProps<{
  modelValue: boolean;
}>();

const emits = defineEmits<{
  (e: "update:modelValue", show: boolean): void;
}>();

const indexStore = usePinia();
const userStore = useUserPinia();
const router = useRouter();

const headerMenuRef = ref<HTMLDListElement>();
/**
 * 判断用户所点击的元素是否符合标准
 */
const judgeClickMenu = (e: Event) => {
  const target: HTMLElement = e.target as HTMLElement;
  if (
    !headerMenuRef.value?.contains(target) &&
    typeof target.className === "string" &&
    !target.className?.includes("menu-icon__item select-more__icon")
  )
    emits("update:modelValue", false);
};

watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue) document.addEventListener("click", judgeClickMenu);
    else document.removeEventListener("click", judgeClickMenu);
  }
);

// 请求缓存(缓存的聊天记录、好友信息等)
const clearCache = () =>
  indexStore.clearCache({ callback: () => router.replace("/") }).then((value) => {
    if (value) {
      emits("update:modelValue", false);
      ElMessage({
        type: "success",
        message: "清除成功",
        duration: 1500,
      });
    }
  });

/**
 *是否显示发表动态的弹框
 */
const showDynamicDiglog = ref<boolean>(false);
// 准备发动态
const readySendDynamic = () => {
  emits("update:modelValue", false);
  showDynamicDiglog.value = true;
};

/**
 * 是否显示我的动态
 */
const showDynamic = ref<boolean>(false);
// 打开我的动态
const openDynamic = () => {
  emits("update:modelValue", false);
  showDynamic.value = true;
};
</script>

<style lang="scss" scoped>
.headerMenu {
  @include opearMenu(1001, 12px);
  top: 15px;
  right: 47px;
  @include noselect();
  overflow: inherit;
  color: #333;

  &-scale {
    &-enter-active,
    &-leave-active {
      transition: transform 0.15s;
    }

    &-enter-from,
    &-leave-to {
      transform: scale(0);
    }
  }

  & > dt {
    padding: 5px 18px 5px 12px;
    display: flex;
    align-items: center;
  }

  &::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 100%;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }

  &-icon {
    font-size: 16px;
    margin-right: 5px;
  }
}
</style>
